<template>
  <div class="app-container diy--container" v-loading="loading">
    <div class="diy--component">
      <el-card class="box-card">
        <!-- <div slot="header">组件</div> -->
        <div class="diy--component__container">
          <!-- <el-card shadow="never">
            <div slot="header">页面设置</div>
            <el-form>
              <el-form-item label="页面设置">
                <el-button>设置</el-button>
              </el-form-item>
            </el-form>
          </el-card> -->

          <el-form>
            <el-form-item label="页面设置">
              <el-button @click="onSwitchComponent({ type: 'page' })"
                >设置</el-button
              >
            </el-form-item>
          </el-form>

          <el-card shadow="never">
            <div slot="header">组件</div>

            <ul class="diy--component__list">
              <li class="diy--cmp__item">
                <a href="javascript:;" @click="onAddComponent('swipe')">
                  <i class="el-icon-more-outline" />
                  轮播广告
                </a>
              </li>

              <li class="diy--cmp__item">
                <a href="javascript:;" @click="onAddComponent('image')">
                  <i class="el-icon-picture-outline"></i>
                  图片广告
                </a>
              </li>

              <li class="diy--cmp__item">
                <a href="javascript:;" @click="onAddComponent('video')">
                  <i class="el-icon-video-camera"></i>
                  视频
                </a>
              </li>

              <li class="diy--cmp__item">
                <a href="javascript:;" @click="onAddComponent('dialog')">
                  <i class="el-icon-copy-document"></i>
                  弹窗
                </a>
              </li>

              <li class="diy--cmp__item">
                <a href="javascript:;" @click="onAddComponent('foot')">
                  <i class="el-icon-mobile-phone"></i>
                  底栏预约
                </a>
              </li>
            </ul>
          </el-card>

          <el-card shadow="never" v-if="this.querys.id">
            <div slot="header">预览</div>
            <el-button @click="onPreview({ type: 'page' })">预览</el-button>
            <img
              v-if="qrUrl"
              :src="qrUrl"
              style="width: 200px; height: 200px"
            />
          </el-card>
        </div>
      </el-card>
    </div>

    <div class="diy--phone">
      <el-card class="box-card">
        <div class="diy--phone__container">
          <div class="phone--container">
            <div
              class="phone--container__header"
              :style="{ backgroundColor: formData.nameBackground }"
            >
              <div
                class="phone--header__title"
                :style="{ color: formData.nameColor }"
              >
                {{ formData.name }}
              </div>
            </div>

            <div class="phone--content">
              <draggable
                v-model="formData.components"
                class="draggable--container"
              >
                <transition-group>
                  <div
                    class="draggable--item"
                    v-for="item in formData.components"
                    :key="item.id"
                    :class="{
                      'draggable--item__current':
                        currentComponent.id === item.id,
                    }"
                    @click="onSwitchComponent(item)"
                  >
                    <div class="draggable--item__ctrl">
                      <i
                        class="el-icon-delete"
                        @click.stop.prevent="onRemoveComponent(item.id)"
                      />
                    </div>

                    <!-- 图片 -->
                    <template v-if="item.type === 'image'">
                      <div class="draggable--item__image">
                        <template v-if="!item.url">
                          <div class="draggable--item__text">
                            图片宽度为750，高度不限
                          </div>
                        </template>
                        <template v-else>
                          <img :src="item.url" />
                        </template>
                      </div>
                    </template>

                    <!-- 视频 -->
                    <template v-if="item.type === 'video'">
                      <div class="draggable--item__video">
                        <img v-show="item.url" :src="item.url" />
                        <i class="el-icon-video-play" />
                      </div>
                    </template>

                    <!-- 轮播 -->
                    <template v-if="item.type === 'swipe'">
                      <div
                        class="draggable--item__swipe"
                        :style="{ height: item.height / 2 + 'px' }"
                      >
                        <div
                          class="draggable--item__text"
                          v-if="item.urlList.length <= 0"
                        >
                          轮播广告
                        </div>

                        <van-swipe
                          v-else
                          :autoplay="item.interval"
                          :width="375"
                        >
                          <van-swipe-item
                            v-for="(image, index) in item.urlList"
                            :key="index"
                          >
                            <img
                              :src="image.url"
                              :style="{ height: item.height / 2 + 'px' }"
                            />
                          </van-swipe-item>
                        </van-swipe>
                      </div>
                    </template>

                    <!-- 底栏 -->
                    <template v-if="item.type === 'foot'">
                      <div class="draggable--item__foot">
                        <div class="draggable--item__text">
                          <p>底栏预约</p>
                          本内容不占高度
                        </div>
                      </div>
                    </template>

                    <!-- 弹窗 -->
                    <template v-if="item.type === 'dialog'">
                      <div class="draggable--item__foot">
                        <div class="draggable--item__text">
                          <p>弹窗</p>
                          本内容不占高度
                        </div>
                      </div>
                    </template>
                  </div>
                </transition-group>
              </draggable>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <div class="diy--setting">
      <el-card class="box-card">
        <div class="diy--setting__container">
          <component
            v-bind:is="currentFormComponent"
            :form-data.sync="formData"
            :form-config.sync="formConfig"
            ref="settingForm"
          ></component>
        </div>
      </el-card>
    </div>

    <div class="fixed--footer">
      <el-button type="primary" id="editor" @click="submitForm()"
        >保存</el-button
      >
      <!-- <el-button @click="resetForm('validateForm')">重置</el-button> -->
    </div>
  </div>
</template>
<script>
import { getDetail, create, update, qr } from '@/api/page'

import draggable from 'vuedraggable'
import { v4 as uuidv4 } from 'uuid'

import PageSetting from './form/page.vue'
import ImageSetting from './form/image.vue'
import VideoSetting from './form/video.vue'
import SwipeSetting from './form/swipe.vue'
import FootSetting from './form/foot.vue'
import DialogSetting from './form/dialog.vue'

import { config } from '../config'

const { routePath } = config

export default {
  name: 'AboutCreateUpdate',
  components: {
    draggable,
    PageSetting,
    ImageSetting,
    VideoSetting,
    SwipeSetting,
    FootSetting,
    DialogSetting,
  },
  filters: {},
  props: {
    type: {
      type: String,
      default: function () {
        return 'create'
      },
    },
  },
  data() {
    return {
      loading: false,

      currentFormComponent: PageSetting,

      qrUrl: '',

      // query 参数
      querys: {
        id: '',
      },

      formData: {
        id: '',

        // 页面设置
        name: '',
        shareImg: '',
        shareImgList: [],
        nameColor: '#000000',
        nameBackground: '#ffffff',
        title: '',
        subtitle: '',
        prompt:'',
        // 组件
        components: [],
        status: true,
      },

      // 配置
      formConfig: {
        componentId: '',
        uploadFile: {
          list: [],
          limit: 1,
          atype:0,
          appid:'',
          path:'',
        },
        uploadVideo: {
          list: [],
          limit: 1,
          autoplay: true,
          loop: true,
        },
        swipe: {
          list: [],
          limit: 1,
          height: 450,
          interval: 3000,
          autoplay: true,
        },

        foot: {
          btnColor: '#000000',
          btnTitle: '',
          btnSubtitle: '',
          phone: '',
          list: [],
           limit: 1,
        },

        dialog: {
          status: true,
          url: '',
          time: 0,
          btnColor: '#000000',
          btnText1: '',
          btnText2: '',
        },
      },

      // 选中组件
      currentComponent: {
        id: '',
        type: '',
      },
    }
  },
  watch: {},
  created() {
    console.log('process.env.VUE_APP_BASE_HOST', process.env.VUE_APP_BASE_HOST)
    this.getQuery()
  },
  methods: {
    // 添加组件
    onAddComponent(type) {
      const id = uuidv4()

      if (type === 'foot') {
        const item = this.formData.components.find((v) => {
          return v.type === 'foot'
        })

        if (item) {
          this.$message({
            type: 'error',
            message: '该组件只能添加一个',
          })

          return
        }
      }

      if (type === 'dialog') {
        const item = this.formData.components.find((v) => {
          return v.type === 'dialog'
        })

        if (item) {
          this.$message({
            type: 'error',
            message: '该组件只能添加一个',
          })

          return
        }
      }

      this.currentComponent = { id, type }

      this.formData.components.push({
        id,
        type,
        url: '',
        urlList: [],
        videoUrl: '',
        videoList: [],
        autoplay: true,
        loop: true,
        height: 450,
        interval: 3000,
        atype:0,
        appid:'',
        path:'',
        btnColor: '#000000',
        btnTitle: '',
        btnSubtitle: '',
        phone: '',

        status: true,
        time: 0,
        btnText1: '',
        btnText2: '',
      })

      this.onSwitchComponent({
        id,
        type,
        url: '',
        urlList: [],
        videoUrl: '',
        videoList: [],
        autoplay: true,
        loop: true,
        height: 450,
        interval: 3000,
        atype:0,
        btnColor: '#000000',
        btnTitle: '',
        btnSubtitle: '',
        phone: '',

        status: true,
        time: 0,
        btnText1: '',
        btnText2: '',
      })
    },

    // 选择组件
    onSwitchComponent(item = {}) {
      const {
        id,
        type,
        url,
        urlList = [],
        videoList = [],
        autoplay = true,
        loop = true,
        interval,
        height,
        btnColor,
        btnTitle,
        btnSubtitle,
        phone,
        atype,
        appid,
        path,
        status,
        time,
        btnText1,
        btnText2,
      } = item

      this.currentComponent = { id, type }
      this.formConfig.componentId = id

      switch (type) {
        case 'page': {
          this.currentFormComponent = 'PageSetting'

          this.formConfig.uploadFile.limit = 1
          break
        }
        case 'image': {
          this.currentFormComponent = 'ImageSetting'

          this.formConfig.uploadFile.list = urlList
          this.formConfig.uploadFile.limit = 1,
          this.formConfig.uploadFile.atype = atype
          this.formConfig.uploadFile.appid = appid
          this.formConfig.uploadFile.path = path
          break
        }
        case 'video': {
          this.currentFormComponent = 'VideoSetting'

          this.formConfig.uploadFile.list = urlList
          this.formConfig.uploadVideo.list = videoList
          this.formConfig.uploadVideo.autoplay = autoplay
          this.formConfig.uploadVideo.loop = loop
          this.formConfig.uploadFile.limit = 1
          this.formConfig.uploadVideo.limit = 1
          break
        }
        case 'swipe': {
          this.currentFormComponent = 'SwipeSetting'

          this.formConfig.swipe.list = urlList
          this.formConfig.swipe.autoplay = autoplay
          this.formConfig.swipe.interval = interval
          this.formConfig.swipe.height = height
          this.formConfig.swipe.limit = 3
          break
        }
        case 'foot': {
          this.currentFormComponent = 'FootSetting'
          this.formConfig.foot.limit = 3
          this.formConfig.foot.list = urlList
          this.formConfig.foot.btnColor = btnColor
          this.formConfig.foot.btnTitle = btnTitle
          this.formConfig.foot.btnSubtitle = btnSubtitle
          this.formConfig.foot.phone = phone
          break
        }
        case 'dialog': {
          this.currentFormComponent = 'DialogSetting'

          this.formConfig.uploadFile.list = urlList
          this.formConfig.uploadFile.limit = 1

          this.formConfig.dialog.url = url
          this.formConfig.dialog.status = status
          this.formConfig.dialog.time = time
          this.formConfig.dialog.btnColor = btnColor
          this.formConfig.dialog.btnText1 = btnText1
          this.formConfig.dialog.btnText2 = btnText2
          break
        }
        default: {
          this.currentFormComponent = 'PageSetting'

          this.formConfig.uploadFile.limit = 1
        }
      }
    },

    // 移除组件
    onRemoveComponent(id) {
      this.currentFormComponent = null

      this.formData.components = this.formData.components.filter((v) => {
        return v.id !== id
      })

      this.currentFormComponent = 'PageSetting'

      this.formConfig.uploadFile.limit = 1
    },

    // 获取  query 参数
    getQuery() {
      const querys = this.$route.query || {}
      this.querys = querys

      if (this.type === 'update') {
        if (!querys.id) {
          this.$router.push('list')
          return
        }
        this.getDetail()
      }
    },

    submitForm() {
      this.$refs.settingForm.$refs.settingForm.validate((valid) => {
        if (!valid) {
          return false
        }

        const { name } = this.formData

        if (!name) {
          this.$message({
            type: 'error',
            message: '微页面标题不能为空',
          })
          return
        }

        this.loading = true
        if (this.type === 'update') {
          this.putUpdate()
        } else {
          this.postCreate()
        }
      })
    },

    // 添加
    postCreate() {
      create(this.formData).then(() => {
        this.loading = false

        this.$message({
          message: '恭喜，操作成功',
          type: 'success',
          duration: 1000,
        })

        setTimeout(() => {
          this.$router.push(`${routePath}list`)
        }, 1000)
      })
    },

    // 更新
    putUpdate() {
      update(this.formData).then(() => {
        this.loading = false

        this.$message({
          message: '恭喜，操作成功',
          type: 'success',
          duration: 1000,
        })

        setTimeout(() => {
          this.$router.push(`${routePath}list`)
        }, 1000)
      })
    },

    // 详情
    getDetail() {
      this.loading = true

      getDetail(this.querys.id).then((res) => {
        this.loading = false
        this.formData = res
      })
    },

    // 预览
    onPreview() {
      qr({ id: this.querys.id }).then((res) => {
        if (res.length < 400) {
          this.$message({
            message: '小程序码生成失败，请重试',
            type: 'error',
            duration: 1000,
          })

          return
        }
        this.qrUrl = res
      })
    },
  },
}
</script>
